<script setup lang="ts">
import { getHomeMstSel } from "@/services/mst";
import type { mstSelReps } from "@/types/mstsel";
import { onLoad } from "@dcloudio/uni-app";
import { ref } from "vue";

const homeMstSel = ref<mstSelReps[]>();
const getHomeMstSelData = async () => {
  const res = await getHomeMstSel();
  homeMstSel.value = res.data;
};

const toMstSel = (mstselId:string) => {
	console.log(mstselId)
	// uni.switchTab({ url: `/pages/mst/mst?mstselId=`+mstselId })
	uni.switchTab({ url: `/pages/mst/mst` })
	wx.setStorageSync('mstselId',mstselId)
}
// @tap="toMstSel(item.id)"
onLoad(() => {
  getHomeMstSelData(); 
});
</script>

<template>
  <uni-grid :column="3" :highlight="true" :showBorder="false">
    <uni-grid-item
      v-for="(item, index) in homeMstSel"
      :index="index"
      :key="index"
			@tap="toMstSel(item.id)"
    >
      <!-- <uni-link :to="`pages/mst/mst?mstselId=`+item.id"></uni-link> -->
      <!-- <navigator
        hover-class="none"
        :url="`/pages/hot/hot?selectId=${item.id}`"
      >{{ item.id }}</navigator> -->
      <view class="grid-item-box" style="background-color: #f7f7f7">
        <!-- <uni-icons type="image" :size="30" color="#777" /> -->
        <image class="image-2" :src="item.mstSelIcon" mode="scaleToFill" />
        <text class="text">{{ item.mstSelName }}</text>
      </view>
    </uni-grid-item>
  </uni-grid>
</template>

<style lang="scss">
.image-2 {
  width: 70rpx;
  height: 70rpx;
}
.image {
  width: 25px;
  height: 25px;
}

.text {
  font-size: 14px;
  margin-top: 5px;
}

.example-body {
  /* #ifndef APP-NVUE */
  // display: block;
  /* #endif */
}

.grid-dynamic-box {
  margin-bottom: 15px;
}

.grid-item-box {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.grid-item-box-row {
  flex: 1;
  // position: relative;
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  flex-direction: row;
  align-items: center;
  justify-content: center;
  padding: 15px 0;
}

.grid-dot {
  position: absolute;
  top: 5px;
  right: 15px;
}

.swiper {
  height: 420px;
}

/* #ifdef H5 */
@media screen and (min-width: 768px) and (max-width: 1425px) {
  .swiper {
    height: 630px;
  }
}

@media screen and (min-width: 1425px) {
  .swiper {
    height: 830px;
  }
}

/* #endif */
</style>